OPENING QUESTION:

► Please convert 00011001 to decimal and then to hex. Look up that value on our ASCII table..

LEARNING OBJECTIVE:  During today's class I will be able to:

• create a basic black and white image using the Code.Org widget in preparation for our next class
• apply hexadecimal values to digital color mapping during today's class

WORDS FOR TODAY:

I STRONGLY URGE YOU TO START A DECK OF FLASH CARDS HERE

• Innovation: "A new or improved idea, device, product, etc, or the development thereof
• Prototype: "A proof of concept"
• CPU: Central Processing Unit
• Binary: 0's & 1's - Base₂
• Octal: Base₈
• Hexadecimal Base₁₆ - 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
• Byte: one binary 'word'
• Bit: one binary 'letter' - either a 0 or 1, short for binary digit!

WORK O' THE DAY: 

►Let's make sure EVERYONE has had an opportunity to register for this class: AP class site

═══════════════════════════

Let's Review!

Now let's move from basic text to basic images:

1. Let's take a gander at THIS description of basic digital images
2. Here's the Code.Org "widget" mentioned in the previous video -- please work with this WIDGET and get comfortable with that (It will take a few tries)
3. Now let's take a look at THIS document/representation of digital images in preparation for working with basic digital images in the next step

NOW... if you're like me, you probably kinda blew through the tutorial...

bad Bad BAD idear! (arrghhh.....)

"Challenge B" hint:

• How many columns are present? (convert that to binary and then type it in the widget to determine the width of your array)
• How many rows present? (convert that to binary and then type it in the widget to determine the height of your array)

NOW... if you're a tad more patient then me, you took the time to THOUGHTFULLY review the tutorial.

Here's a tad MORE info then we might need but it shows the math behind the bits per pixel and color relationship

Now let's set our slide to "6-bit" color. HERE are the colors available to us then... try it out! Set up your array on the widget so it is 8 x 8

How do you suppose those colors are being created? (wow!). Remember this is "6-bit" color, so if we usually type in groups of 4 binary digits separated by spaces, does that mean that only 6 of those bits count?

Let's investigate...

You'll notice that no matter how many different number combinations you type in that you'll only end up with 64 unique colors... which... wait for it.... wait for it...

2⁶

 

Soooooo.... what we're starting to see is that our "color palette" is really a mix of 3 "RGB" colors.

Clearly our modern computers have MUCH more depth than that... let's go to "24 bit" color and see just how rich our color palette becomes!

 

 

 

 

So now we know we've got all those zillions of colors... how do we know which is which? It takes practice or some very nice coloring tools (OR BOTH!)

Let's take a jump over to "W3Schools" which is a pretty astounding resource for our class... please bookmark that site, it will be your friend (honest!)

In particular let's take a look at this color picker.

Now use THAT color picker to choose the FULL 6-digit hex values to play with in your widget

QUICK SMALL GROUP CHECK:

Please create a 16 x 16 grid in the code.org widget and set the color depth to 24-bit

Now please make an X of many colors and show it to me... GO~!

FOR TOMORROW

Now let's see if we can have some fun with a "design your own logo" project and come up with design requirements and have this due next week (Tuesday) as our first graded assignment

Here are my thoughts so far:

1) You must submit a design first for my approval BEFORE you can submit your digital logo: (we used to do this on graph paper with color pencils in class, so you can do it that way and scan it or do it using a Word document or Google Docs or whichever works

2) That design must be in color and you must indicate the 6 digit hex color codes you plan to use in your final logo

3) Your additions?

Project Description and requirements are HERE